<template>
  <a-layout id="layout">
    <a-layout-sider
      v-model="collapsed"
      :trigger="null"
      collapsible
      :style="{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
        transition: 'all 0.5s',
      }"
    >
      <div class="logo">
        <a-avatar
          v-if="!collapsed"
          :size="64"
          icon="user"
          :style="{
            backgroundcolor: '#283544',
          }"
        ></a-avatar>
        <a-icon v-else type="gitlab" style="font-size: 30px" />
        <div class="text-name" v-show="!collapsed">
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"
              >管理员昵称
            </a>
          </a-dropdown>
          <b style="display: block">管理员权限</b>
        </div>
      </div>
      <a-menu theme="dark">
        <a-menu-item key="1">
          <a-icon type="home"></a-icon>
          <span>首页</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="pie-chart"></a-icon>
          <span>统计</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="team"></a-icon>
          <span>社区管理</span>
        </a-menu-item>
        <a-menu-item key="4">
          <a-icon type="user"></a-icon>
          <span>客户管理</span>
        </a-menu-item>
        <a-menu-item key="5">
          <a-icon type="desktop"></a-icon>
          <span>系统设置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout
      :style="{
        marginLeft: collapsed ? '80px' : '200px',
        transition: 'all 0.5s',
      }"
    >
      <a-layout-header
        style="background: #fff; padding: 0"
        :style="{ position: 'fixed', width: '100%' }"
      >
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <span class="hMenu">
          <a-badge :count="0" class="tc">
            <a-icon type="bell" theme="filled" :style="{ fontSize: '1.5em' }" />
          </a-badge>
          <router-link to="/"><a-icon type="logout" />退出</router-link>
        </span>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '90px 16px 0',
          padding: '24px',
          background: '#fff',
          minHeight: '600px',
        }"
      >
        内容区域
      </a-layout-content>
      <a-layout-footer
        :style="{ position: 'fixed', width: '100%' }"
        style="bottom: 0"
        >底部区域
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
    }
  },
}
</script>
<style src="../assets/css/home.css" scoped></style>
<style scoped></style>
